<template>
  <view class="basicList">
    <view
      v-for="(item, index) in baseList"
      :key="index"
      :class="
        type === 'unicorn' ? 'orderBasic space-between ' : 'space-between'
      "
      @click="handleClick(item)"
    >
      <u-avatar
        v-if="type === 'highList'"
        :text="item.xuhao"
        fontSize="18"
       
        randomBgColor
      ></u-avatar>
      <img
        v-if="type !== 'highList'"
        :src="item.img_url"
        :class="item.city ? 'basicList_img' : 'basicList_img_true'"
      />
      <view class="basicList_content">
        <view>
          <h6 class="ellipsis">
            {{ type === "unicorn" ? item.title : item.name }}
          </h6>
          <view class="basicList_desc ellipsisTwo">{{ item.desc_text }}</view>
          <!-- <view v-if="type !== 'invest'" class="basicList_desc ellipsisTwo">{{ item.real_name }}</view> -->
          <view class="basicList_desc ellipsis">{{ item.real_name }}</view>
        </view>

        <view class="basicList_tag between-center">
          <view class="text-container">
            <view v-if="type !== 'highList'">{{
              type === "high" ? item.time : item.tag
            }}</view>
          </view>

          <view v-if="type === 'high' || type === 'qiye' || type === 'highList'"
            >{{ item.city || "中国" }}
          </view>

          <view v-else @click.stop="handleMainCollect(item)">
            <view>
              {{ item.msg ? item.msg : item.is_collect ? "已收藏" : "收藏" }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "mainList",
  props: {
    baseList: [],
    url: "",
    type: "",
    category: "",
  },
  data() {
    return {};
  },

  onReady() {
    console.log(this.baseList);
  },
  methods: {
    handleClick(item) {
      // console.log(item, "111");

      uni.navigateTo({
        url: this.url,
        success: (res) => {
          // 向目标页面发送数据
          res.eventChannel.emit("acceptDataFromSourcePage", { param: item });
        },
      });
    },
    async handleMainCollect(item) {
      // console.log(item, 111);
      if (item.is_collect) {
        const res = await this.$api.delCollect({
          id: item.id,
          category: this.category || "product_qiye",
        });
        global.showToast("取消收藏成功");
      } else {
        const res = await this.$api.addCollect({
          id: item.id,
          category: this.category || "product_qiye",
        });
        global.showToast("收藏成功");
      }

      this.$emit("handleMainCollect", res);
    },
  },
};
</script>

<style scoped lang="scss">
.basicList {
  margin-bottom: 40upx;

  > view {
    margin-bottom: 20upx;
    height: 180upx;
    box-sizing: border-box;
  }

  .basicList_img {
    width: 120upx;
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 10upx; /* 移除圆角 */
  }
  .basicList_img img {
    width: 100%; /* 图片宽度 100% */
    height: 100%; /* 图片高度 100% */
  }
  .basicList_img_true {
    width: 120upx;
    height: 120upx;
    margin-top: 20upx;
  }

  .basicList_content {
    flex: 1;
    width: calc(100% - 130upx);
    margin-left: 20upx;
    display: flex;
    flex-direction: column;
    color: #999;
    font-size: 22upx;
  }

  h6 {
    color: #000;
    font-size: 28upx;
  }

  .basicList_tag {
    width: 100%;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20upx;
  }
}

.orderBasic {
  > img {
    order: 2;
    width: 200upx;
    height: 100%;
    border-radius: 20upx;
    background-color: #f0f0f0;
  }

  > view {
    max-width: calc(100% - 250upx);

    order: 1;
    margin-left: 0px;
    padding-right: 20upx;
  }
}
.text-container {
  width: 450upx; /* 设置容器宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
